<template>
  <el-dialog v-bind="{ ...$attrs }" class="app-builder" >
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px"  status-icon>
      <el-form-item label="生成网址">
        <el-input v-model="ruleForm.target" @input="handleChangeCheck" />
      </el-form-item>
      <div class="form-item">
        <el-form-item label="流量来源">
          <el-select v-model="ruleForm.utmSource" @change="handleChangeCheck">
            <el-option label="Select Source" value="Select Source"></el-option>
            <el-option label="facebook" value="facebook"></el-option>
            <el-option label="google" value="google"></el-option>
            <el-option label="blog" value="blog"></el-option>
            <el-option label="instagram" value="instagram"></el-option>
            <el-option label="line" value="line"></el-option>
            <el-option label="sms" value="sms"></el-option>
            <el-option label="email" value="email"></el-option>
            <el-option label="youtube" value="youtube"></el-option>
            <el-option label="web" value="web"></el-option>
            <el-option label="services" value="services"></el-option>
            <el-option label="other" value="other"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="流量类型">
          <el-select v-model="ruleForm.utmMedium"  @change="handleChangeCheck">
            <el-option label="Select Medium" value="Select Medium"></el-option>
            <el-option label="ads" value="ads"></el-option>
            <el-option label="post" value="post"></el-option>
            <el-option label="post-ads" value="post-ads"></el-option>
            <el-option label="promotion" value="promotion"></el-option>
            <el-option label="system" value="system"></el-option>
            <el-option label="chat" value="chat"></el-option>
            <el-option label="other" value="other"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="form-item">
        <el-form-item label="广告活动">
          <el-input v-model="ruleForm.utmCampaign" @input="handleChangeCheck" />
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="ruleForm.utmTerm" @input="handleChangeCheck" />
        </el-form-item>
      </div>
      <el-form-item label="广告内容">
        <el-input v-model="ruleForm.utmContent" @input="handleChangeCheck" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="$emit('close')"> 关闭 </el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)"> 确认 </el-button>
    </template>
  </el-dialog>
</template>
 
<script lang="ts" setup>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const emit = defineEmits<{(event: 'close'): void;(event: 'success',value:string): void;  }>()
//路由
const router = useRouter()
//状态vuex
const store = useStore()
//定义属性
interface RuleForm{
  "target": string,
  "utmSource": string,
  "utmMedium": string,
  "utmCampaign": string,
  "utmTerm": string,
  "utmContent": string
}
//表单
const formSize = ref('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  "target": '',
  "utmSource": '',
  "utmMedium": '',
  "utmCampaign": '',
  "utmTerm": '',
  "utmContent": ''
})
const rules = reactive<FormRules<RuleForm>>({
 
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      emit("success",ruleForm.target)
    } else {
      console.log('error submit!', fields)
    }
  })
}
const handleChangeCheck= () => {
  //当网址有值的时候才触发
  if(ruleForm.target){
    if(!ruleForm.target.includes('http')){
      ruleForm.target="http://"+ruleForm.target
    }else{
      ruleForm.target=ruleForm.target.split("?")[0]
    }
    for(let i in ruleForm){
        const val=ruleForm[i]
        const isQ=ruleForm.target.includes('?')
        if(val && i!=='target'){
          ruleForm.target+=`${!isQ?'?':'&'}${i}=${val}`
        }
    }
  }
  
}
</script>
<style lang="scss" scoped>
.form-item{
  display: flex;
  .el-form-item{
    flex: 1;
  }
}
</style>